<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>Create new employee</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <ui:composition template="com.template/AdminTemplate.xhtml">
            <ui:define name="page-content">
                <div class="row">
                    <ol class="breadcrumb" style="background-color: #fff;">                        
                        <li><a href="#">Blue Pumpkin</a></li>
                        <li><a href="employees.xhtml">Employees</a></li>
                        <li class="active">Create new employee</li>
                    </ol>
                </div>
                <div class="row">

                    <div class="col-sm-6">
                        <h4><span class="label label-default">Contact Information</span></h4>
                        <ul class="list-group well">                                    
                            <li class="list-group-item" style="border: none;">
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-lock fa-fw"></i>username
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.username}" class="form-control" p:placeholder="Username" id="username" required="true" label="username" size="40"  
                                                 requiredMessage="* Please enter your Username." maxlength="50">
                                        <f:ajax event="blur" execute="@this" render="usernameError"/>
                                    </h:inputText>                                    
                                    <h:message for="username" id="usernameError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-key fa-fw"></i>password
                                </span><br/>
                                <div class="form-group">
                                    <div class="form-group">
                                        <h:inputSecret value="#{addEmployee.password}" class="form-control" p:placeholder="Password" id="password" required="true" label="password" size="40" 
                                                       requiredMessage="* Please enter your Password." maxlength="50">
                                            <f:ajax event="blur" execute="@this" render="passwordError"/>
                                        </h:inputSecret>                                        
                                        <h:message for="password" id="passwordError" style="color: red" />
                                    </div>
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-image fa-fw"></i> avatar
                                </span><br/>
                                <div class="form-group">                                    
                                    <h:inputText value="#{addEmployee.avatar}" class="form-control" p:placeholder="http://..." id="avatar" required="true" label="avatar" size="40"  
                                                 requiredMessage="* Please enter your avatar image link." maxlength="200">
                                        <f:ajax event="blur" execute="@this" render="avatarError"/>
                                    </h:inputText>
                                    <p class="help-block pull-right small"><em>etc: http://placehold.it/195x195</em></p>
                                    <h:message for="avatar" id="avatarError" style="color: red" />
                                </div>                                
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-user"></i> full name
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.fullname}" class="form-control" p:placeholder="FullName" id="fullname" required="true" label="fullname" size="40"  
                                                 requiredMessage="* Please enter your FullName." maxlength="50">
                                        <f:ajax event="blur" execute="@this" render="fullnameError"/>
                                    </h:inputText>                                                        
                                    <h:message for="fullname" id="fullnameError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-phone"></i> phone
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.phone}" class="form-control" p:placeholder="Phone" id="phone" required="true" label="username" size="40"  
                                                 requiredMessage="* Please enter your Phone."
                                                 validatorMessage="* Invalid Phone format" maxlength="50">
                                        <f:ajax event="blur" execute="@this" render="phoneError"/>
                                        <f:validateRegex pattern="\d{9,10}" />
                                    </h:inputText>                   
                                    <p class="help-block pull-right small"><em>etc: 1973381329 (9 or 10 digits)</em></p>
                                    <h:message for="phone" id="phoneError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-mobile-phone"></i> mobile phone
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.mobilephone}" class="form-control" p:placeholder="Mobile phone" id="mobilephone" required="true" label="mobilephone" size="40"  
                                                 requiredMessage="* Please enter your Mobile phone."
                                                 validatorMessage="* Invalid Mobile phone format" maxlength="50">
                                        <f:ajax event="blur" execute="@this" render="mobilephoneError"/>
                                        <f:validateRegex pattern="0\d{9,10}" />
                                    </h:inputText>   
                                    <p class="help-block pull-right small"><em>etc: 0973381329(10 or 11 digits)</em></p>
                                    <h:message for="mobilephone" id="mobilephoneError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-envelope"></i> email
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.email}" class="form-control" p:placeholder="Email Address" id="email" required="true" label="email" size="40" 
                                                 requiredMessage="* Please enter your email address."
                                                 validatorMessage="* Invalid email format" maxlength="50">
                                        <f:ajax event="blur" execute="@this" render="emailError"/>
                                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                    </h:inputText>
                                    <p class="help-block pull-right small"><em>etc: example@blue.pumpkin.vn</em></p>
                                    <h:message for="email" id="emailError" style="color: red" />  
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-map-marker"></i> address
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.address}" class="form-control" p:placeholder="Address " id="address" required="true" label="address" size="40"  
                                                 requiredMessage="* Please enter your Address." maxlength="100">
                                        <f:ajax event="blur" execute="@this" render="addressError"/>
                                    </h:inputText>                                    
                                    <h:message for="address" id="addressError" style="color: red" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <h4><span class="label label-default">Additional Information</span></h4>
                        <ul class="list-group well">
                            <li class="list-group-item" style="border: none;">                                
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-credit-card"></i> identity card
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.identityCard}" class="form-control" p:placeholder="Identity Card " id="identityCard" required="true" label="identityCard" size="40"  
                                                 requiredMessage="* Please enter your Identity Card."
                                                 validatorMessage="* Invalid Identity Card format" maxlength="20">
                                        <f:ajax event="blur" execute="@this" render="identityCardError"/>
                                        <f:validateRegex pattern="^[0-9]+$" />
                                    </h:inputText>                                    
                                    <h:message for="identityCard" id="identityCardError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-gift"></i> birthday
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.birthdate}" class="form-control" p:placeholder="Birthdate" id="birthdate" required="true" label="birthdate" size="40"  
                                                 requiredMessage="* Please enter your Birthdate.">
                                        <f:ajax event="blur" execute="@this" render="birthdateError"/>
                                        <f:convertDateTime pattern="yyyy-MM-dd" />
                                    </h:inputText>  
                                    <p class="help-block pull-right small"><em>Format date: yyyy-MM-dd</em></p>
                                    <h:message for="birthdate" id="birthdateError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-user"></i> gender
                                </span><br/>
                                <div class="form-group">                                    
                                    <h:selectOneMenu value="#{addEmployee.gender}" class="form-control" >
                                        <f:selectItem itemValue="Male" itemLabel="Male" />
                                        <f:selectItem itemValue="Female" itemLabel="Female" />
                                    </h:selectOneMenu> 
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-users"></i> group
                                </span><br/>
                                <div class="form-group">
                                    <h:inputText value="#{addEmployee.groups}" class="form-control" p:placeholder="Group " id="group" required="true" label="group" size="40"  
                                                 requiredMessage="* Please enter your Group." maxlength="200">
                                        <f:ajax event="blur" execute="@this" render="groupError"/>
                                    </h:inputText>
                                    <br/>
                                    <h:message for="group" id="groupError" style="color: red" />
                                </div>
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-briefcase"></i> position
                                </span><br/>
                                <div class="form-group">                                    
                                    <h:selectOneMenu value="#{addEmployee.position}" class="form-control" >
                                        <f:selectItem itemValue="Officer" itemLabel="Officer"></f:selectItem>
                                        <f:selectItem itemValue="GM (General Manager)" itemLabel="GM (General Manager)"/>
                                        <f:selectItem itemValue="Chief Officer - Director" itemLabel="Chief Officer - Director" />
                                        <f:selectItem itemValue="CFO (Chief Financial Officer)" itemLabel="CFO (Chief Financial Officer)" />
                                        <f:selectItem itemValue="President and CEO" itemLabel="President and CEO" />
                                    </h:selectOneMenu> 
                                </div>                                                    
                                <span class="pull-left text-muted small">
                                    <i class="fa fa-sitemap"></i> departments
                                </span><br/>
                                <div class="form-group">                                    
                                    <h:selectOneMenu  value="#{addEmployee.departments}" class="form-control" >
                                        <f:selectItem itemValue="Sales" itemLabel="Sales"></f:selectItem>
                                        <f:selectItem itemValue="Staff" itemLabel="Staff" />
                                        <f:selectItem itemValue="Marketing department" itemLabel="Marketing department" />
                                        <f:selectItem itemValue="Production Department" itemLabel="Production Department" />
                                        <f:selectItem itemValue="Human resource Department" itemLabel="Human resource Department" />
                                        <f:selectItem itemValue="Finance Department" itemLabel="Finance Department" />
                                        <f:selectItem itemValue="I.T. (Information Technology)" itemLabel="I.T. (Information Technology)" />
                                        <f:selectItem itemValue="Customer Service" itemLabel="Customer Service" />
                                    </h:selectOneMenu> 
                                </div>
                            </li>                            
                        </ul>
                        <div class="col-xs- text-center">
                            <div class="btn-group">
                                <button  class="btn btn-default" type="reset" >
                                    <i class="fa fa-refresh fa-fw"></i>Reset
                                </button>
                                <h:commandLink class="btn btn-danger" action="#{addEmployee.createEmplyee()}">
                                    <f:ajax render="@form" execute="@form"/>
                                    <i class="fa fa-save fa-fw"></i>Create
                                </h:commandLink>                                    
                            </div>
                        </div>    
                    </div>
                </div>                
            </ui:define>
        </ui:composition>
    </h:body>
</html>

